<template>
	<div class="detailCenter">
<div class="centers">
<div class="tops">
<div class="top1">
	<span></span>
	<span>官方推荐</span>
	<span>安心订·放心游</span>
</div>
<div class="top2">
	<div class="cai">
		<van-sticky :offset-top="0">
			<van-tabs>
				<van-tab title="推荐"></van-tab>
				<div class="qing">
					<van-tab title="电竞精选">
					</van-tab>
				</div>
				<van-tab title=""></van-tab>
				<van-tab title=""></van-tab>
			</van-tabs>
		</van-sticky>
	</div>
</div>
</div>

<div class="bottom"> 
	<img :src="img1" alt="">
	<div class="right">
		<p class="nian">年卡-悠享</p>
		<div class="dian">
			<span>亮点:</span>
			<span>不少于227天持卡人入园</span>
		</div>
		<div class="shi">
			<span>365天有效期</span>
		</div>
		<div class="li">
			<span>不少于227天持卡人入园</span>
		</div>
		<div class="mian">
			<span>尊享专属福利</span>
		</div>
		<div class="tiao">
			<span>条件退</span>
			<span>无须换票</span>
		</div>
		<p>月销售1000+</p>
		<div class="ding">
			<span>¥</span>
			<span>1688</span>
			<span>起</span>
			<span @click="topage">订</span>
		</div>
	</div>
 </div>
	</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
		
			img1: "https://img.alicdn.com/imgextra/i3/6000000004023/O1CN01gjXra41faaBW2ezfr_!!6000000004023-0-itemdesc.jpg",
			arr:[]
		}
	},
	methods: {
		topage() {
			this.$router.push('/ding').catch (err => { })
		}
		}
	
}
</script>

<style scoped>
.detailCenter{
	width: 7.02rem;
	height: 6.12rem;
	margin-left: .24rem;
			background-image: linear-gradient(180deg, #f0e0d9ee, #fff);
	margin-top: .24rem;
	border-radius: .15rem;
}
.centers{
	width: 100%;
	height: 100%;
	margin-left: .18rem;
	border-radius: .15rem;
	box-sizing: border-box;
	overflow: hidden;
}
.tops{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: .02rem;
}

.top1{
	height: .38rem;
}
.top1 :nth-child(1){
	display: block;
	width: .38rem;
	height: .38rem;
	background: url('https://img.alicdn.com/imgextra/i3/O1CN01CQeupn1V1dhi9viVK_!!6000000002593-2-tps-76-74.png') no-repeat;
		background-size: 100% auto;
		margin-top: .24rem;
}
.top1 :nth-child(2) {
	display: block;
margin-left: .45rem;
font-size: 20px;
		color: #8f6552;
margin-top: -.5rem;
}
.top1 :nth-child(3) {
display: block;
	margin-left: 2.2rem;
	margin-top: -.36rem;
			color: #919499;
}
.cai {
	width: 7rem;
	margin-left: -0.4rem;
	margin-top: .2rem;
	line-height: 1rem;
	border-bottom: 1px solid transparent;
	/* background-color: aquamarine; */
}

 ::v-deep .van-sticky{
	width: 6rem;
	margin-left: .18rem;
}
/* van-tab  */
::v-deep .van-tab--active {
	height: .6rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
	background-color: rgba(255, 221, 0, 0.648);
	margin-left: .2rem;
}

::v-deep .van-tabs__line {
	display: none;
}

/*  van-tabs__nav van-tabs__nav--line  */
::v-deep .van-tab {
	margin-top: 5px;
	margin-bottom: 5px;
}
::v-deep .van-tabs__nav{
	background-color: #f0e0d932;
}
.bottom{
	width: 6.6rem;
	margin-left: .05rem;
	display: flex;
}
.bottom img{
 width: 2.2rem;
 height: 3.6rem;
 border-radius: .3rem;
}
.right{
	flex: 1;
	margin-left: .2rem;
}
.nian{ 
	font-size: 16px;
}
.dian{
	margin-top: .18rem;
}
.dian :nth-child(1){
	width: 66px;
		color: white;
	background-color: #ff7300;
	border: 1px solid #ff7300;
	padding: 2px;
}
.dian :nth-child(2) {
	width: 2.68rem;
	color: #ff7300;
	border: 1px solid #ff7300;
	padding: 2px;
}
.shi{
	margin-top: .15rem;
	color: #919499;
}

.li {
	margin-top: .1rem;
	color: #919499;
}
.mian{
	margin-top: .1rem;
		color: #919499;
}
.tiao{
	margin-top: .1rem;
}
.tiao :nth-child(1){
	color: green;
	border: 1px solid green;
	padding: 2px;
	margin-right: .1rem;
	border-radius: .1rem;
}
.tiao :nth-child(2) {
	color: rgb(92, 95, 102);
	border: 1px solid rgb(92, 95,102);
	padding: 2px;
	border-radius: .1rem;
}
.right :nth-child(7){
	margin-top: .2rem;
	color: #919499;
}
.ding{
	margin-left: 1.5rem;
}
.ding :nth-child(1){
	color: red;
	font-size: 14px;
	position: relative;
		top: -0.1rem;
}
.ding :nth-child(2) {
		color: red;
		font-size: 20px;
		position: relative;
			top: -0.1rem;
}
.ding :nth-child(3) {
	color: #919499;
	margin-left: 5px;
	position: relative;
	top: -0.1rem;
}
.ding :nth-child(4) {
	display: block;
	width: .84rem;
	height: .84rem;
	text-align: center;
	line-height: .84rem;
	font-weight: 700;
background-color: #ff7300;
	color: white;
	font-size: 20px;
	margin-left: 1.7rem;
	margin-top: -0.9rem;
	border-radius: .15rem;
}
</style>